<template>
  <div class="logo-title">
    <n-space align="center">
      <n-el tag="div" class="logo">
        <img
          style="width: 30px; height: 30px"
          :src="mainStore.siteInfo.logo || LogoImage"
          alt=""
        />
      </n-el>
      <div class="title">{{ mainStore.siteInfo.name || "数据编辑器" }}</div>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import LogoImage from "@/assets/image/logo.png";
import LogoImageDark from "@/assets/image/logo-dark.png";
import { getSiteInfo } from "@/api";
import { useMainStore } from "@/store";
const mainStore = useMainStore();
const { t } = useI18n();
const props = defineProps({
  title: {
    type: String,
    default: "Map Editor",
  },
});
onMounted(() => {
  if (!mainStore.siteInfo.logo || mainStore.siteInfo.name) {
    getSiteInfo().then((res: any) => {
      // console.log(res);
      mainStore.siteInfo.logo = res.data[0].value;
      mainStore.siteInfo.name = res.data[1].value;
    });
  }
});
</script>

<style lang="scss" scoped>
.logo-title {
  font-weight: bold;
  .logo {
    width: 30px;
    height: 30px;
    // background-color: var(--avatar-color);
    border-radius: 4px;
    img {
      // filter: drop-shadow(0px 0px 10px #63e2b7);
      // animation: flow 3s ease infinite;
      transition: filter 1s ease;
    }
    img:hover {
      filter: drop-shadow(0px 0px 15px #fff);
    }
    // @keyframes flow {
    //   0% {
    //     filter: drop-shadow(0px 0px 0px #fff);
    //   }
    //   50% {
    //     filter: drop-shadow(0px 0px 15px #fff);
    //   }
    //   100% {
    //     filter: drop-shadow(0px 0px 0px #fff);
    //   }
    // }
  }
}
@media (max-width: 900px) {
  .title {
    display: none;
  }
}
</style>
